import React from 'react';
import ReactECharts from 'echarts-for-react';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';

interface WordCloudData {
  word: string;
  value: number;
}

interface CustomWordCloudProps {
  data: WordCloudData[];
  title?: string;
  height?: number;
}

const CustomWordCloud = ({ 
  data, 
  title, 
  height = 300
}: CustomWordCloudProps) => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  // ECharts 词云配置
  const option = {
    title: {
      text: title,
      textStyle: {
        color: theme.textPrimary,
        fontSize: 16,
        fontWeight: '500'
      },
      left: 'center',
      top: 10
    },
    tooltip: {
      show: true,
      formatter: (params: any) => {
        return `${params.name}: ${params.value}`;
      }
    },
    series: [{
      type: 'wordCloud',
      sizeRange: [12, 60],
      rotationRange: [0, 0],
      gridSize: 8,
      shape: 'circle',
      textStyle: {
        color: mode === 'dark' 
          ? () => `rgb(${Math.round(Math.random() * 160 + 90)}, ${Math.round(Math.random() * 160 + 90)}, ${Math.round(Math.random() * 160 + 90)})`
          : () => `rgb(${Math.round(Math.random() * 160)}, ${Math.round(Math.random() * 160)}, ${Math.round(Math.random() * 160)})`
      },
      emphasis: {
        textStyle: {
          color: mode === 'dark' ? '#fff' : '#000',
          fontWeight: 'bold'
        }
      },
      data: data.map(item => ({
        name: item.word,
        value: item.value,
        textStyle: {
          color: mode === 'dark' 
            ? ['#61dca3', '#4caf50', '#81c784', '#a5d6a7', '#c8e6c9', '#e8f5e9']
            : ['#1890ff', '#40a9ff', '#69c0ff', '#91d5ff', '#bae7ff', '#e6f7ff']
        }
      }))
    }],
    backgroundColor: 'transparent'
  };

  return React.createElement('div', {
    style: { 
      height, 
      position: 'relative',
      padding: '20px',
      background: theme.cardBackground,
      borderRadius: '8px',
      border: `1px solid ${theme.cardBorder}`,
    }
  },
    React.createElement(ReactECharts, {
      option: option,
      style: { height: '100%', width: '100%' },
      theme: mode === 'dark' ? 'dark' : 'light'
    })
  );
};

export default CustomWordCloud;